<template>
	<view class="contenter">

		<!-- <view class="text-area">
			<view>
				<button size="default" @click="getLocation" type="default" hover-class="is-hover">gps</button>
			</view>
			<view>
				<button size="default" @click="getLocationGcj02" type="default" hover-class="is-hover">gcj02</button>
			</view>
		</view> -->

		<view id="mapContener" class="map_Contener">
			<u-loading-icon text="加载中" textSize="15" vertical v-if="loading"
				style="position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);"></u-loading-icon>
			<!-- <button type="primary" v-if="total>curentMarkLen" :loading="moreLoading" @click="loadMore">加载更多</button> -->
		</view>
	</view>
</template>

<script>
	import {
		securityJsCode,
		key
	} from '@/config/env.js'
	import {
		getBadDistributionMap,
		getCodeImg
	} from '@/common/api/performingLoan.js'
	import {
		getCustomerList,
		getGoodStartCustomerlist
	} from '@/common/api/customer.js'

	import AMapLoader from "@amap/amap-jsapi-loader";
	export default {
		data() {
			return {
				map: null,
				curentLongitude: 0,
				curentLatitude: 0,
				queryParams: {
					pageNum: 1,
					pageSize: 30
				},
				loading: true,
				total: 0, //总标注点
				timer: null,
				curentMarkLen: 0, //当前标注点
				moreLoading: false
			}
		},
		props: {
			hasGoodStart: { //1表示包含开门红数据
				type: String,
				default: null
			},
			type: { //1表示存款客户，2表示贷款客户
				type: String,
				required: true,
				default: '1'
			},
		},
		created: function(option) {

		},
		mounted: function() {
			this.intMapLoad()

		},
		beforeUnmount() {

			this.map?.destroy();
		},
		methods: {

			loadMore() {
				if (this.moreLoading == false) {
					this.moreLoading = true
					// alert("加载更多") //加载完成后，过一秒在改成false
					uni.showLoading({
						title: '加载中...'
					});
					this.queryParams.pageNum += 1;

					this.getCustomerData()
				}
			},
			async getCustomerData() {

				var res = null;
				if (this.type == 'goodStart') {

					res = await getGoodStartCustomerlist({
						...this.queryParams,
						hasLonLat: '1'
					})
				} else {
					res = await getCustomerList({
						...this.queryParams,
						hasLonLat: '1',
						hasGoodStart: this.hasGoodStart,
						yewuSourceStr: this.type
					})
				}

				console.log(".......", res)

				if (res.rows) {
					var rows = res.rows
					this.curentMarkLen = this.curentMarkLen + rows.length
					this.total = res.total
					const markerList = []
					rows.forEach(function(item, index) {
						if (item.longitude != null && item.latitude != null) {
							const marker = new AMap.Marker({
								position: [item.longitude, item
									.latitude
								], //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
								// icon: "/static/map/currentMark.png",
								icon: "/static/map/redFlag.png",
								// size: new AMap.Size(25, 34), //图标尺寸
								title: item.cname,
								extData: {

									id: item.id
								}
							});

							marker.on("click", function(e) {

								uni.navigateTo({
									url: `/pages/management/manageDetail?data=${e.target._originOpts.extData.id}&type=0`
								});
							});
							//将创建的点标记添加到已有的地图实例：
							markerList.push(marker)

						}
					})
					if (markerList.length > 0) {
						this.map.add(markerList);
					}
					this.timer = setTimeout(() => {
						this.moreLoading = false
						if (this.timer) {
							clearTimeout(this.timer);
							this.timer = null;
						}
					}, 1000);
				}


				this.loading = false

				// uni.hideLoading()
			},
			getCurentPosition(AMap) {
				// alert("开始获取位置")
				AMap.plugin('AMap.Geolocation', () => {
					var geolocation = new AMap.Geolocation({
						enableHighAccuracy: true, //是否使用高精度定位，默认:true
						timeout: 10000, //超过10秒后停止定位，默认：5s
						position: 'RB', //定位按钮的停靠位置
						offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
						zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点

					});
					// this.map.addControl(geolocation);
					geolocation.getCurrentPosition((status, result) => {
						if (status == 'complete') {
							// alert("获取成功")

							var startLonLat = JSON.parse(JSON.stringify(result.position))
							this.curentLongitude = startLonLat[0]
							this.curentLatitude = startLonLat[1]

							// alert(curentLongitude.value)
							// alert(curentLatitude.value)
							this.initMap(AMap);
							//标记当前位置
							this.markCurrentLocation(AMap)

						} else {
							// alert("获取失败")
							this.initMap(AMap);
						}
					});
				});
			},
			intMapLoad() {
				// uni.showLoading({
				// 	title: '加载中...'
				// });
				this.loading = true
				// alert("调用了")
				// return
				// // alert("初始化地图")
				//alert(curentLongitude.value, curentLatitude.value)
				window._AMapSecurityConfig = {
					securityJsCode: securityJsCode,
				};
				// alert("1")
				AMapLoader.load({
						key: key, // 申请好的Web端开发者Key，首次调用 load 时必填
						version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
						//plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
					})
					.then((AMap) => {
						// alert("2")
						this.getCurentPosition(AMap)

					})
					.catch((e) => {
						// alert("3")
						alert(e);
					});
			},
			initMap(AMap) {
				this.map = new AMap.Map("mapContener", {
					// 设置地图容器id
					viewMode: "3D", // 是否为3D地图模式
					zoom: 13, // 初始化地图级别
					// center: [116.397428, 39.90923], // 初始化地图中心点位置
					//center: [curentLongitude.value, curentLatitude.value]
					center: process.env.NODE_ENV == 'development' ? [114.515737, 38.048128] : [this
						.curentLongitude, this.curentLatitude
					]
				});
				this.getCustomerData()
			},
			markCurrentLocation(AMap) {
				const marker = new AMap.Marker({
					position: process.env.NODE_ENV == 'development' ? [114.515737, 38.048128] : [this
						.curentLongitude, this.curentLatitude
					], //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
					// icon: "/static/map/currentMark.png",
					icon: "/static/map/currentMark2.png",
					// size: new AMap.Size(25, 34), //图标尺寸
					title: "当前位置",
				});

				//将创建的点标记添加到已有的地图实例：
				this.map.add(marker);


				var text = new AMap.Text({
					text: "当前位置", //标记显示的文本内容
					anchor: "top-center", //设置文本标记锚点位置
					offset: new AMap.Pixel(0, 0),
					// draggable: true, //是否可拖拽
					// cursor: "pointer", //指定鼠标悬停时的鼠标样式。
					// angle: 10, //点标记的旋转角度
					style: {
						//设置文本样式，Object 同 css 样式表
						"padding": ".5rem .75rem",
						// "margin-bottom": "1rem",
						"border-radius": ".25rem",
						"background-color": "red",
						// "width": "15rem",
						"border-width": 0,
						"box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
						"text-align": "center",
						"font-size": "12px",
						"color": "white",
					},
					position: [this.curentLongitude, this.curentLatitude] //点标记在地图上显示的位置
				});
			}

		}
	}
</script>

<style scoped lang="scss">
	page,
	.contenter,
	.map_Contener {
		width: 100%;
		height: 100%;
	}

	.map_Contener {
		position: relative;

		button {
			position: absolute;
			right: 20rpx;
			bottom: 10rpx;
			z-index: 99;
			font-size: 28rpx;
		}
	}
</style>